<script setup lang="ts">
import router from "@/router";
import Menu from "@/views/system/Menu.vue";
import Mobile from "@/views/system/Mobile.vue";
import MCard from "../../components/form/MCard.vue"
import { RouterLink, RouterView } from "vue-router";
import { ref } from "vue";

let menu = ref({
  menuId:11,menuLabel:"<script setup>",menuName:"notesSetup",menuPath:"/notes/notesSetup",menuIcon:"",menuIntroduce:'',menuIn:'',isActive:true,parentId:0,order:1,children:[]
})
const testData = ref("");
const homeHandle = () => {
  alert(menu.value.menuLabel)
};
const activeMenu = function(menuItem) {
  menu.value = Object.assign(menuItem) 
  //菜单子组件的选中菜单事件，回调父组件方法
  //触发路由跳转
  if (menuItem.menuPath != "") {
    router.push({
      name: menuItem.menuName,
      path: menuItem.menuPath,
    })
  }
};
</script>

<template>
  <div class="home-main">
    <div class="home-top">
      <div class="logo" @click="homeHandle">
        <svg
          t="1660413754116"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="14631"
          width="32"
          height="32"
        >
          <path
            d="M834.7 279.8l61.3-58.9V208H683.7L532.4 586.4 360.3 208H137.7v12.9l71.6 86.6c7 6.4 10.6 15.8 9.7 25.2V673c2.2 12.3-1.7 24.8-10.3 33.7L128 805v12.7h228.6v-12.9l-80.6-98c-8.7-8.9-12.9-21.3-11.1-33.7V378.7l200.7 439.2h23.3l172.6-439.2v349.9c0 9.2 0 11.1-6 17.2l-62.1 60.3V819h301.2v-12.9l-59.9-58.9c-5.2-4-7.9-10.7-6.8-17.2V297c-1.1-6.5 1.6-13.2 6.8-17.2z"
            p-id="14632"
            fill="#e6e6e6"
          ></path>
        </svg>
        <svg
          t="1660413909296"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="19050"
          width="32"
          height="32"
        >
          <path
            d="M755.498667 183.168a42.666667 42.666667 0 0 1 0 60.330667L487.008 512l268.490667 268.501333a42.666667 42.666667 0 0 1-59.274667 61.376c-0.362667-0.330667-0.704-0.682667-1.056-1.045333l-298.666667-298.666667a42.666667 42.666667 0 0 1 0-60.330666l298.666667-298.666667C703.498667 174.837333 714.421333 170.666667 725.333333 170.666667s21.834667 4.170667 30.165334 12.501333zM256 170.666667a42.666667 42.666667 0 0 0-42.666667 42.666666v597.333334a42.666667 42.666667 0 0 0 85.333334 0V213.333333a42.666667 42.666667 0 0 0-42.666667-42.666666z"
            p-id="19051"
            fill="#e6e6e6"
          ></path>
        </svg>
        <span>UI</span>
      </div>
      <div class="home-top-button">
        <a href="https://gitee.com/kunmei/mkui.git" target="_blank">
          <svg
            t="1660412944374"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="2682"
            width="32"
            height="32"
          >
            <path
              d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z"
              fill="#e6e6e6"
              p-id="2683"
            ></path>
          </svg>
        </a>
        <div>
          <span>1.10.0</span>
        </div>
          <span>Vue3</span>
      </div>
    </div>
    <div class="home-content">
      <div class="home-left">
        <Menu @activeMenu="activeMenu" />
      </div>
      <div class="home-center">
        <div class="title">{{menu.menuLabel}}</div>
        <MCard :title="'介绍'" :content="menu.menuIntroduce"/>
        <MCard :title="'引入'" :content="menu.menuIn" v-if="menu.menuIn && menu.menuIn!=''"/>
        <RouterView />
      </div>
      <div class="home-right">
        <Mobile />
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.home-main {
  width: 100%;
  min-height: 100vh;
  .home-top {
    width: 100%;
    height: 8vh;
    background-color: #001938;
    color: #f7f8fa;
    display: flex;
    justify-content: space-between;
    align-items: center;
    div {
      padding: 0 1.5rem 0 1.5rem;
    }
    .logo {
      display: flex;
      align-items: center;
    }
    .home-top-button {
      display: flex;
      justify-content: space-around;
      align-items: center;
      width: 300px;
      a{
        display: flex;
      }
      div {
        display: flex;
        align-content: center;
        width: 90px;
        border: 1px solid #f7f8fa;
        border-radius: 20px;
      }
    }
  }
  .home-content {
    display: flex;
    justify-content: space-between;
    div {
      border-radius: 2px;
      padding: 1vh 1vw 1vh 1vw;
    }
    .home-left {
      width: 15%;
      height: 92vh;
      overflow-y: scroll;
      background-color: #fff;
    }
    .home-center {
      padding-top: 1rem;
      width: 60%;
      .title{
        padding: 0;
        font-size: 1.6rem;
      }
    }
    .home-right {
      width: 24%;
    }
  }
}
</style>
